<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
	<title>我要预约</title>
	<script type="text/javascript" src="js/init.js"></script>
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/appoint.css">
	<link rel="stylesheet" type="text/css" href="css/parsley.css">
	<link rel="stylesheet" type="text/css" href="css/sui/sm.min.css">
</head>
<body>
	<div class="appoint-main">
		<form id="appoint-form">	
			<div class="appoint-title">预约无创产前基因检测</div>
			<div class="item">
				<input type="text" name="" id="mon-select" placeholder="选择孕周" data-parsley-error-message="请选择生产时间" required readonly/>
			</div>
			<div class="item">					
				<input type="text" name="" id="bdate-select" placeholder="选择办理时间" data-parsley-error-message="请选择办理时间" required readonly/>
			</div>		
			<div class="text">*温馨提示：新生儿遗传代谢病筛查需在宝宝出生三天后进行检测</div>
			<div class="select-item">
				<div class="select-title">选择办理站点</div>
				<div class="select-con">
					<input type="text" value="" placeholder="六盘水市妇幼保健院" name="" readonly><i></i>
					<div class="select-list hide">
						<a href="javascript:;" class="list-item" data-value="1">六盘水市妇幼保健院</a>
						<a href="javascript:;" class="list-item" data-value="1">六盘水市人民医院</a>
						<a href="javascript:;" class="list-item" data-value="1">德江县人民医院</a>
						<a href="javascript:;" class="list-item" data-value="1">德江县民族中医院</a>
						<a href="javascript:;" class="list-item" data-value="1">盘县第二人民医院</a>
					</div>
				</div>		
			</div>
			<a href="javascript:;" class="select-other">其他医院</a>
			<input type="submit" name="" value="提交" class="submit">
		</form>

	</div>	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/parsley.js"></script>
	<script type="text/javascript">
		$.noConflict();
	</script>
	<script type="text/javascript" src="js/zepto.min.js"></script>	
	<script type="text/javascript" src="js/sui/sm.min.js"></script>
	<script type="text/javascript" src="js/sui/datetime-picker.js"></script>
	<script type="text/javascript">
		$(function() {
			jQuery('#my-info').parsley();

			$("#mon-select").picker({
				toolbarTemplate: '<header class="bar bar-nav">\
				  <button class="button button-link pull-right close-picker">确定</button>\
				  <h1 class="title">请选择孕周</h1>\
				  </header>',
				cols: [
				    {
				      textAlign: 'center',
				      values: ['1周', '2周', '3周', '4周', '5周', '6周', '7周', '8周', '9周', '10周', '11周', '12周', '13周', '14周',
				      '15周', '16周', '17周', '18周', '19周', '20周', '21周', '22周', '23周']
				    },				  
				]
			});

			var $list = $(".select-list");
			$(".select-con input, .select-con>i").click(function() {
				if($list.hasClass("hide")) {					
					$list.show();
				}else {
					$list.hide();
				}
			})

			$(".select-list a").click(function() {
				$(".select-con input").val($(this).text());
				$(".select-list").hide();
			})

			$("#bdate-select").datetimePicker({
			    value: ['1985', '12', '04']
		    });

		    $(document).on('click', '.select-other', function () {
		    	var _html = '<div class="select-tip">' 
		    				+'<div class="tip-title">尊敬的XXX女士，您好！</div>'
		    				+'<div class="tip-con">由于您选择的医院与我司尚未合作，无法保证您的顺利采样，请致电4001880699咨询客服，我们会为您尽快安排采样服务。</div>'
		    				+'</div>'

		    				//选择指定医院才有
		    				+'<div class="tip-other">'
		    				+'<div class="tip-item"><div class="tip-name">XXX医院青果小站电话</div><div class="tip-txt">13xxxxxx</div></div>'
		    				+'<div class="tip-item"><div class="tip-name">统一客服电话</div><div class="tip-txt">13xxxxxx</div></div>'
		    				+'<div class="tip-hot">温馨提示：检测只需采集10ml静脉血，采血前无需空腹，请正常饮食，安心前往 。</div>'
		    				+'</div>'
		    	$.alert(_html);
		    });

		})
	</script>
</body>
</html>